import React , { Component } from 'react';
import '../../pages/roles-mgt/roles-mgt.css';
import { Form,Input,Switch,Checkbox,Button,message,Row,Col} from 'antd';
//import {authList,buttonList} from '../../config/authList';
import { reqAddRoleInfor,reqEditRoleAuth } from '../../api';   

const CheckboxGroup = Checkbox.Group;

class RolesMgtCheckbox extends Component {
  
  constructor(props) {
    super(props);
    const role = this.props.role;
    const authList = this.props.authList;
    console.log("权限列表显示页面",role,authList);
    this.formRef = React.createRef();
    this.state = {
      role_name: role.role_name,
      role_name_Zh: role.role_name_Zh,
      role_remark: role.role_remark,

      checkedList_0: this.defaultCheckedList(authList[0].title,role),   // '首页'
      indeterminate_0: true,
      checkAll_0: false,
      disabled_0: this.defaultDisabled(authList[0].title,role),    // '首页'

      checkedList_1: this.defaultCheckedList(authList[1].title,role),  // '用户管理'
      indeterminate_1: true,
      checkAll_1: false,
      disabled_1: this.defaultDisabled(authList[1].title,role),  // '用户管理'

      checkedList_2: this.defaultCheckedList(authList[2].title,role),  // '组织管理'
      indeterminate_2: true,
      checkAll_2: false,
      disabled_2: this.defaultDisabled(authList[2].title,role),  // '组织管理'

      checkedList_3: this.defaultCheckedList(authList[3].title,role), // '工区管理'
      indeterminate_3: true,
      checkAll_3: false,
      disabled_3: this.defaultDisabled(authList[3].title,role),

      checkedList_4: this.defaultCheckedList(authList[4].title,role), // '权限管理'
      indeterminate_4: true,
      checkAll_4: false,
      disabled_4: this.defaultDisabled(authList[4].title,role),

      checkedList_5: this.defaultCheckedList(authList[5].title,role),   // '数据管理'
      indeterminate_5: true,
      checkAll_5: false,
      disabled_5: this.defaultDisabled(authList[5].title,role),

      checkedList_6: this.defaultCheckedList(authList[6].title,role),  // '数据处理'
      indeterminate_6: true,
      checkAll_6: false,
      disabled_6: this.defaultDisabled(authList[6].title,role),

      checkedList_7: this.defaultCheckedList(authList[7].title,role),  // '数据展示'
      indeterminate_7: true,
      checkAll_7: false,
      disabled_7: this.defaultDisabled(authList[7].title,role),
  
    };
  };

  

  defaultCheckedList = (title,role) => {  // 读取初始 按钮(某一角色的) 
    const aaa = [];
    if(role.role_id){
      role.role_menus.map((item) => {
        if(item.title === title){
          item.buttons.map((item) => {
            aaa.push(item.value);
          })
        } 
      })
    }
    return aaa;
  }

  defaultDisabled = (title,role) => {  // 读取初始 菜单模块（某一角色的）
    return role.role_id?((role.role_menus.map((item) => item.title.indexOf(title) == -1?false:true)).join('').indexOf('true') == -1?true:false):false
  }

  onChangeSwitch_0 = (checked) => {   //true or false
    if(checked === true){
      this.setState({
        disabled_0: false
      })
    }else{
      this.setState({
        disabled_0: true
      })
    };
    console.log("onChangeSwitch_0",checked);
  }
   onChangeCheckbox_0 = (plainOptions,checkedList) => {    // checkbox单选
     this.setState({
      checkedList_0: checkedList,
      indeterminate_0: !!checkedList.length && checkedList.length < plainOptions.length,    
      checkAll_0: checkedList.length === plainOptions.length,
    },() => console.log("onChangeCheckbox_0",checkedList));
   };
   onCheckAllChange_0 = (plainOptions,e) => {  // checkbox全选
     this.setState({
      checkedList_0: e.target.checked ? plainOptions : [],
      indeterminate_0: false,
      checkAll_0: e.target.checked,
    },() => console.log("onCheckAllChange_0",e.target.checked));
   };

  onChangeSwitch_1 = (checked) => { 
    if(checked === true){
      this.setState({disabled_1: false})
    }else{
      this.setState({disabled_1: true})
    };
    console.log("onChangeSwitch_1",checked);
  }
  onChangeCheckbox_1 = (plainOptions,checkedList) => {    // checkbox单选
    this.setState({
      checkedList_1: checkedList,
      indeterminate_1: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll_1: checkedList.length === plainOptions.length,
    },() => {console.log("onChangeCheckbox_1",checkedList)});
  };
  onCheckAllChange_1 = (plainOptions,e) => {  // checkbox全选
    this.setState({
      checkedList_1: e.target.checked ? plainOptions : [],
      indeterminate_1: false,
      checkAll_1: e.target.checked,
    },() => console.log("onCheckAllChange_1",e.target.checked));
  };

  onChangeSwitch_2 = (checked) => { 
    if(checked === true){
      this.setState({disabled_2: false})
    }else{
      this.setState({disabled_2: true})
    }
    console.log("onChangeSwitch_2",checked);
  }
  onChangeCheckbox_2 = (plainOptions,checkedList) => {    // checkbox单选
    this.setState({
      checkedList_2: checkedList,
      indeterminate_2: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll_2: checkedList.length === plainOptions.length,
    },() => console.log("onChangeCheckbox_2",checkedList));
  };
  onCheckAllChange_2 = (plainOptions,e) => {  // checkbox全选
    this.setState({
      checkedList_2: e.target.checked ? plainOptions : [],
      indeterminate_2: false,
      checkAll_2: e.target.checked,
    },() => console.log("onCheckAllChange_2",e.target.checked));
  };

  onChangeSwitch_3 = (checked) => { 
    if(checked === true){
      this.setState({disabled_3: false})
    }else{
      this.setState({disabled_3: true})
    }
    console.log("onChangeSwitch_3",checked);
  }
  onChangeCheckbox_3 = (plainOptions,checkedList) => {    // checkbox单选
    this.setState({
      checkedList_3: checkedList,
      indeterminate_3: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll_3: checkedList.length === plainOptions.length,
    },() => console.log("onChangeCheckbox_3",checkedList));
  };
  onCheckAllChange_3 = (plainOptions,e) => {  // checkbox全选
    this.setState({
      checkedList_3: e.target.checked ? plainOptions : [],
      indeterminate_3: false,
      checkAll_3: e.target.checked,
    },() => console.log("onCheckAllChange_3",e.target.checked));
  };

  onChangeSwitch_4 = (checked) => { 
    if(checked === true){
      this.setState({disabled_4: false})
    }else{
      this.setState({disabled_4: true})
    }
    console.log("onChangeSwitch_4",checked);
  }
  onChangeCheckbox_4 = (plainOptions,checkedList) => {    // checkbox单选
    this.setState({
      checkedList_4: checkedList,
      indeterminate_4: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll_4: checkedList.length === plainOptions.length,
    },() => console.log("onChangeCheckbox_4",checkedList));
  };
  onCheckAllChange_4 = (plainOptions,e) => {  // checkbox全选
    this.setState({
      checkedList_4: e.target.checked ? plainOptions : [],
      indeterminate_4: false,
      checkAll_4: e.target.checked,
    },() => console.log("onCheckAllChange_4",e.target.checked));
  };

  onChangeSwitch_5 = (checked) => { 
    if(checked === true){
      this.setState({disabled_5: false})
    }else{
      this.setState({disabled_5: true})
    }
    console.log("onChangeSwitch_5",checked);
  }
  onChangeCheckbox_5 = (plainOptions,checkedList) => {    // checkbox单选
    this.setState({
      checkedList_5: checkedList,
      indeterminate_5: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll_5: checkedList.length === plainOptions.length,
    },() => console.log("onChangeCheckbox_5",checkedList));
  };
  onCheckAllChange_5 = (plainOptions,e) => {  // checkbox全选
    this.setState({
      checkedList_5: e.target.checked ? plainOptions : [],
      indeterminate_5: false,
      checkAll_5: e.target.checked,
    },() => console.log("onCheckAllChange_5",e.target.checked));
  };

  onChangeSwitch_6 = (checked) => { 
    if(checked === true){
      this.setState({disabled_6: false})
    }else{
      this.setState({disabled_6: true})
    }
    console.log("onChangeSwitch_6",checked);
  }
  onChangeCheckbox_6 = (plainOptions,checkedList) => {    // checkbox单选
    this.setState({
      checkedList_6: checkedList,
      indeterminate_6: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll_6: checkedList.length === plainOptions.length,
    },() => console.log("onChangeCheckbox_6",checkedList));
  };
  onCheckAllChange_6 = (plainOptions,e) => {  // checkbox全选
    this.setState({
      checkedList_6: e.target.checked ? plainOptions : [],
      indeterminate_6: false,
      checkAll_6: e.target.checked,
    },() => console.log("onCheckAllChange_6",e.target.checked));
  };

  onChangeSwitch_7 = (checked) => { 
    if(checked === true){
      this.setState({disabled_7: false})
    }else{
      this.setState({disabled_7: true})
    }
    console.log("onChangeSwitch_7",checked);
  }
  onChangeCheckbox_7 = (plainOptions,checkedList) => {    // checkbox单选
    this.setState({
      checkedList_7: checkedList,
      indeterminate_7: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll_7: checkedList.length === plainOptions.length,
    },() => console.log("onChangeCheckbox_7",checkedList));
  };
  onCheckAllChange_7 = (plainOptions,e) => {  // checkbox全选
    this.setState({
      checkedList_7: e.target.checked ? plainOptions : [],
      indeterminate_7: false,
      checkAll_7: e.target.checked,
    },() => console.log("onCheckAllChange_7",e.target.checked));
  };

  addRoleInfor = async(role_name,role_name_Zh,role_remark,role_menus) => {   // 创建角色 响应函数
    //console.log('新建角色参数',role_name,role_name_Zh,role_remark,role_menus);
    const result = await reqAddRoleInfor(role_name,role_name_Zh,role_remark,role_menus);
    //console.log("新建角色",result);
    if(result.code === 200){
      // 3、重新获取列表: 基于更新数据与原数据没有一点关系  
      this.props.getRoleList();
      message.success("新建用户成功");
    }else{
      message.error(result.msg);
    };  
  }

 
  editRoleInfor = async(role_id,role_name,role_name_Zh,role_remark,role_menus) => {    //设置角色权限(编辑) 响应函数
    //console.log('编辑角色参数',role_id,role_name,role_name_Zh,role_remark,role_menus);
    const result = await reqEditRoleAuth(role_id,role_name,role_name_Zh,role_remark,role_menus);
    //console.log("编辑角色",result);
    if(result.code === 200){
     //3、重新获取列表
      this.props.getRoleList();
      message.success("编辑用户成功");
    }else{
      message.error(result.msg);
    };
  }

  onChange1 = (e) => {   // 更新 英文名称的input值
    this.setState({
      role_name: e.target.value,
    })
  }
  onChange2 = (e) => {  // 更新 名称的input值
    this.setState({
      role_name_Zh: e.target.value,
    })
  }
  onChange3 = (e) => {  // 更新 备注的input值
    this.setState({
      role_remark: e.target.value,
    })
  }


  onFinish = values => {   // 提交表单form
    const {role,authList} = this.props;
    const {checkedList_0,checkedList_1,checkedList_2,checkedList_3,checkedList_4,checkedList_5,checkedList_6,checkedList_7,
           disabled_0,disabled_1,disabled_2,disabled_3,disabled_4,disabled_5,disabled_6,disabled_7} = this.state;
    const button_0 = [];
    const button_1 = [];
    const button_2 = [];
    const button_3 = [];
    const button_4 = [];
    const button_5 = [];
    const button_6 = [];
    const button_7 = [];
    checkedList_0.map((item) => button_0.push({value: item}));
    checkedList_1.map((item) => button_1.push({value: item}));
    checkedList_2.map((item) => button_2.push({value: item}));
    checkedList_3.map((item) => button_3.push({value: item}));
    checkedList_4.map((item) => button_4.push({value: item}));
    checkedList_5.map((item) => button_5.push({value: item}));
    checkedList_6.map((item) => button_6.push({value: item}));
    checkedList_7.map((item) => button_7.push({value: item}));
    
    const List =[ {disabled:disabled_0,title: authList[0].title,key: authList[0].key,button:button_0},  // title:'首页',key:'/home',
                  {disabled:disabled_1,title: authList[1].title,key: authList[1].key,button:button_1},  // ,title:'用户管理',key:'/user-mgt',
                  {disabled:disabled_2,title: authList[2].title,key: authList[2].key,button:button_2},  // title:'组织管理',key:'/origanize-mgt',
                  {disabled:disabled_3,title: authList[3].title,key: authList[3].key,button:button_3},  // title:'工区管理',key:'/workshop-mgt',
                  {disabled:disabled_4,title: authList[4].title,key: authList[4].key,button:button_4},  // title:'权限管理',key:'/roles-mgt'
                  {disabled:disabled_5,title: authList[5].title,key: authList[5].key,button:button_5},  // title:'数据管理',key:'/data-mgt'
                  {disabled:disabled_6,title: authList[6].title,key: authList[6].key,button:button_6},  // title:'数据处理',key:'/data-process',
                  {disabled:disabled_7,title: authList[7].title,key: authList[7].key,button:button_7} ];// title:'数据展示',key:'/data-show'
    const role_id = role.role_id;
    const role_name = values.role_name;
    const role_name_Zh = values.role_name_Zh;
    const role_remark = values.role_remark;
    const role_menus = [];
    var routing_id;
    List.map((item) => {
      if(!item.disabled){
        authList.map((item1,index) => {
          if(item1.title === item.title){
            routing_id = item1.routing_id;
            var routing_buttons = [];
            item.button.map((item2) => {
              //console.log("item2",item2);
              authList[index].routing_buttons.map((item3) => {
                if(item2.value === item3.value){
                  routing_buttons.push({button_id: item3.button_id})
                }
              })
            })
            role_menus.push({routing_id: item1.routing_id, routing_buttons: routing_buttons})
          }
        })
      } 
    });
    console.log("权限模块提交按钮",role_id,role_name,role_name_Zh,role_remark,role_menus);
    if(role.role_id){
      this.editRoleInfor(role_id,role_name,role_name_Zh,role_remark,role_menus);
    }else{
      this.addRoleInfor(role_name,role_name_Zh,role_remark,role_menus);
    }
  };

  // 当组件接收到新的属性时自动调用(初始显示不会调用，只在更新时调用)
  componentWillReceiveProps(nextProps){  // 根据新传入的role 来更新 权限相关状态
    const role = nextProps.role;
    const authList = this.props.authList;
    this.setState({
      role_name: role.role_name,
      role_name_Zh: role.role_name_Zh,
      role_remark: role.role_remark,

      checkedList_0: this.defaultCheckedList(authList[0].title,role),
      checkedList_1: this.defaultCheckedList(authList[1].title,role),
      checkedList_2: this.defaultCheckedList(authList[2].title,role),
      checkedList_3: this.defaultCheckedList(authList[3].title,role),
      checkedList_4: this.defaultCheckedList(authList[4].title,role),
      checkedList_5: this.defaultCheckedList(authList[5].title,role),
      checkedList_6: this.defaultCheckedList(authList[6].title,role),
      checkedList_7: this.defaultCheckedList(authList[7].title,role),
      disabled_0: this.defaultDisabled(authList[0].title,role), 
      disabled_1: this.defaultDisabled(authList[1].title,role), 
      disabled_2: this.defaultDisabled(authList[2].title,role), 
      disabled_3: this.defaultDisabled(authList[3].title,role), 
      disabled_4: this.defaultDisabled(authList[4].title,role), 
      disabled_5: this.defaultDisabled(authList[5].title,role), 
      disabled_6: this.defaultDisabled(authList[6].title,role), 
      disabled_7: this.defaultDisabled(authList[7].title,role), 
    })
  }


  render() {
    const {checkedList_0,indeterminate_0,checkAll_0,disabled_0,
           checkedList_1,indeterminate_1,checkAll_1,disabled_1,
           checkedList_2,indeterminate_2,checkAll_2,disabled_2,
           checkedList_3,indeterminate_3,checkAll_3,disabled_3,
           checkedList_4,indeterminate_4,checkAll_4,disabled_4,
           checkedList_5,indeterminate_5,checkAll_5,disabled_5,
           checkedList_6,indeterminate_6,checkAll_6,disabled_6,
           checkedList_7,indeterminate_7,checkAll_7,disabled_7,} = this.state;
    const {role,authList,buttonList,roleButtons} = this.props;
    const initialValues = {
      role_name: this.state.role_name,
      role_name_Zh: this.state.role_name_Zh,
      role_remark: this.state.role_remark,  
    };
    setTimeout(() => { 
      
      if(this.formRef.current !== null){
        this.formRef.current.setFieldsValue(initialValues); 
      }  
    },10); 
    
    return(
      <div className='role-mgt-content'>
        {role.role_name_Zh? <p className="content-p show-role">角色：{role.role_name_Zh}</p>:  <p className="content-p show-role">创建角色</p>}
        <Form  
          ref={this.formRef}   
          name="control-ref" 
          onFinish={this.onFinish}
          initialValues={initialValues}  
        > 
        <Row>
          <Col span={8}>
          <Form.Item className="data-config-form" name="role_name" label="角色名称(英文)：" rules={[{ required: true }]}>
            <Input className="data-config-input" onChange={this.onChange1} />
          </Form.Item>
          </Col>
          <Col span={8}>
          <Form.Item className="data-config-form" name="role_name_Zh" label="角色名称(中文)：" rules={[{ required: true }]}>
            <Input className="data-config-input" onChange={this.onChange2} />
          </Form.Item>
          </Col>
          <Col span={8}>
          <Form.Item className="data-config-form" name="role_remark" label="备&nbsp;&nbsp;&nbsp;注&nbsp;&nbsp;&nbsp;说&nbsp;&nbsp;&nbsp;明 ：" rules={[{ required: true }]}>
            <Input className="data-config-input" onChange={this.onChange3} />
          </Form.Item>
          </Col>
        </Row>
          
          
          
          <div className="role-mgt">
            <p className="content-p">
              <span>拥有权限:</span>
            <Button type="primary" htmlType="submit" className="role-button" disabled={roleButtons.indexOf("role-update1") === -1 ? true : false} >
              保存
            </Button>
            </p>

            <Form.Item  
            >
              <div className="role-title">
                <span className="role-span">{authList[0].title}</span>
                <div>
                <Checkbox
                className="role-checkbox"
                indeterminate={indeterminate_0}   //设置 indeterminate 状态，只负责样式控制 
                onChange={this.onCheckAllChange_0.bind(this,buttonList[0].button)}  //变化时回调函数 
                checked={checkAll_0}   //指定当前是否选中， 选中 模块名称
                disabled={disabled_0}  // 失效状态
              >
                全选
              </Checkbox>
                <Switch className="role-switch" size="small" checked={!disabled_0} onChange={this.onChangeSwitch_0} />   {/*  true or false */}
                </div>
              </div> 
              
              { disabled_0 ? null : <CheckboxGroup
                options={authList[0].routing_buttons}    //指定可选项
                value={checkedList_0}   //指定选中的选项
                onChange={this.onChangeCheckbox_0.bind(this,buttonList[0].button)}  //变化时回调函数，
                disabled={disabled_0}  //整组失效
              />  }
              
            </Form.Item>

            <Form.Item 
            >
              <div className="role-title">
                <span className="role-span">{authList[1].title}</span>
                <div className='role-right'>
                <Checkbox
                className="role-checkbox"
                indeterminate={indeterminate_1}   //设置 indeterminate 状态，只负责样式控制 
                onChange={this.onCheckAllChange_1.bind(this,buttonList[1].button)}  //变化时回调函数 
                checked={checkAll_1}   //指定当前是否选中， 选中 模块名称
                disabled={disabled_1}  // 失效状态
              >
                全选
              </Checkbox>
                <Switch className="role-switch" size="small" checked={!disabled_1} onChange={this.onChangeSwitch_1} />   {/*  true or false */}
                </div>
              </div> 
              { disabled_1 ? null : <CheckboxGroup
                options={authList[1].routing_buttons}    //指定可选项
                value={checkedList_1}   //指定选中的选项
                onChange={this.onChangeCheckbox_1.bind(this,buttonList[1].button)}  //变化时回调函数，
                disabled={disabled_1}  //整组失效
              />  }

              
            </Form.Item> 

            <Form.Item 
            >
              <div className="role-title">
                <span className="role-span">{authList[2].title}</span>   
                <div className='role-right'>
                <Checkbox
                className="role-checkbox"
                indeterminate={indeterminate_2}   //设置 indeterminate 状态，只负责样式控制 
                onChange={this.onCheckAllChange_2.bind(this,buttonList[2].button)}  //变化时回调函数 
                checked={checkAll_2}   //指定当前是否选中， 选中 模块名称
                disabled={disabled_2}  // 失效状态
              >
                全选
              </Checkbox>
                <Switch className="role-switch" size="small" checked={!disabled_2} onChange={this.onChangeSwitch_2} />   {/*  true or false */}
                </div>
              </div> 
              { disabled_2 ? null : <CheckboxGroup
                options={authList[2].routing_buttons}    //指定可选项
                value={checkedList_2}   //指定选中的选项
                onChange={this.onChangeCheckbox_2.bind(this,buttonList[2].button)}  //变化时回调函数，
                disabled={disabled_2}  //整组失效
              />  }
              
            </Form.Item>

            <Form.Item 
            >
              <div className="role-title">
                <span className="role-span">{authList[3].title}</span>
                <div className='role-right'>
                <Checkbox
                className="role-checkbox"
                indeterminate={indeterminate_3}   //设置 indeterminate 状态，只负责样式控制 
                onChange={this.onCheckAllChange_3.bind(this,buttonList[3].button)}  //变化时回调函数 
                checked={checkAll_3}   //指定当前是否选中， 选中 模块名称
                disabled={disabled_3}  // 失效状态
              >
                全选
              </Checkbox>
                <Switch className="role-switch" size="small" checked={!disabled_3} onChange={this.onChangeSwitch_3} />   {/*  true or false */}
                </div>
              </div> 
              { disabled_3 ? null : <CheckboxGroup
                options={authList[3].routing_buttons}    //指定可选项
                value={checkedList_3}   //指定选中的选项
                onChange={this.onChangeCheckbox_3.bind(this,buttonList[3].button)}  //变化时回调函数，
                disabled={disabled_3}  //整组失效
              />  }
              
              
            </Form.Item>

            <Form.Item 
            >
              <div className="role-title">
                <span className="role-span">{authList[4].title}</span>
                <div className='role-right'>
                <Checkbox
                className="role-checkbox"
                indeterminate={indeterminate_4}   //设置 indeterminate 状态，只负责样式控制 
                onChange={this.onCheckAllChange_4.bind(this,buttonList[4].button)}  //变化时回调函数 
                checked={checkAll_4}   //指定当前是否选中， 选中 模块名称
                disabled={disabled_4}  // 失效状态
              >
                全选
              </Checkbox>
                <Switch className="role-switch" size="small" checked={!disabled_4} onChange={this.onChangeSwitch_4} />   {/*  true or false */}
                </div>
              </div> 
              
              { disabled_4 ? null : <CheckboxGroup
                options={authList[4].routing_buttons}    //指定可选项
                value={checkedList_4}   //指定选中的选项
                onChange={this.onChangeCheckbox_4.bind(this,buttonList[4].button)}  //变化时回调函数，
                disabled={disabled_4}  //整组失效
              /> }
              
            </Form.Item>

            <Form.Item 
            >
              <div className="role-title">
                <span className="role-span">{authList[5].title}</span>
                <div className='role-right'>
                <Checkbox
                className="role-checkbox"
                indeterminate={indeterminate_5}   //设置 indeterminate 状态，只负责样式控制 
                onChange={this.onCheckAllChange_5.bind(this,buttonList[5].button)}  //变化时回调函数 
                checked={checkAll_5}   //指定当前是否选中， 选中 模块名称
                disabled={disabled_5}  // 失效状态
              >
                全选
              </Checkbox>
                <Switch className="role-switch" size="small" checked={!disabled_5} onChange={this.onChangeSwitch_5} />   {/*  true or false */}
                </div>
              </div> 
              
              { disabled_5 ? null : <CheckboxGroup
                options={authList[5].routing_buttons}    //指定可选项
                value={checkedList_5}   //指定选中的选项
                onChange={this.onChangeCheckbox_5.bind(this,buttonList[5].button)}  //变化时回调函数，
                disabled={disabled_5}  //整组失效
              /> }
              
            </Form.Item>

            <Form.Item 
            >
              <div className="role-title">
                <span className="role-span">{authList[6].title}</span>
                <div className='role-right'>
                <Checkbox
                className="role-checkbox"
                indeterminate={indeterminate_6}   //设置 indeterminate 状态，只负责样式控制 
                onChange={this.onCheckAllChange_6.bind(this,buttonList[6].button)}  //变化时回调函数 
                checked={checkAll_6}   //指定当前是否选中， 选中 模块名称
                disabled={disabled_6}  // 失效状态
              >
                全选
              </Checkbox>
                <Switch className="role-switch" size="small" checked={!disabled_6} onChange={this.onChangeSwitch_6} />   {/*  true or false */}
                </div>
              </div> 
              
              { disabled_6 ? null : <CheckboxGroup
                options={authList[6].routing_buttons}    //指定可选项
                value={checkedList_6}   //指定选中的选项
                onChange={this.onChangeCheckbox_6.bind(this,buttonList[6].button)}  //变化时回调函数，
                disabled={disabled_6}  //整组失效
              /> }
              
            </Form.Item>

            <Form.Item 
            >
              <div className="role-title">
                <span className="role-span">{authList[7].title}</span>
                <div className='role-right'>
                <Checkbox
                className="role-checkbox"
                indeterminate={indeterminate_7}   //设置 indeterminate 状态，只负责样式控制 
                onChange={this.onCheckAllChange_7.bind(this,buttonList[7].button)}  //变化时回调函数 
                checked={checkAll_7}   //指定当前是否选中， 选中 模块名称
                disabled={disabled_7}  // 失效状态
              >
                全选
              </Checkbox>
                <Switch className="role-switch" size="small" checked={!disabled_7} onChange={this.onChangeSwitch_7} />   {/*  true or false */}
                </div>
              </div> 
              
              {disabled_7 ? null : <CheckboxGroup
                options={authList[7].routing_buttons}    //指定可选项
                value={checkedList_7}   //指定选中的选项
                onChange={this.onChangeCheckbox_7.bind(this,buttonList[7].button)}  //变化时回调函数，
                disabled={disabled_7}  //整组失效
              /> }
              
            </Form.Item>
          </div>
          {/* <Form.Item>
            
          </Form.Item> */}
        </Form>  
      </div>
    )
  }
}

export default RolesMgtCheckbox;

